<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
首页
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 定义放置文章标题的div容器 -->
<div class="container">
    <div class="row mt-2">
        <!-- 文章内容 -->
        <div class="col-sm-12">
            <!-- 卡片容器 -->
            <div class="h-100">
                <!-- 标题 -->
                <!-- 摘要 -->
                <div class="card-body ">
                    <h4 class="card-title  mt-10">{{ article.title }}</h4>
                    <p class="card-text pt-3">{{ article.body }}</p>
                        <small class="col align-self-end" style="color: gray;">
                            <span class="bi bi-eye">
                            {{ article.total_views }}
                            </span>
                        </small>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <span>我要留言</span>
        <div>
            <form action="/comment/post-comment/{{article.id}}/" method="post">
                {%csrf_token%}
                <div>
                <textarea name="body" class="border m-auto form-control mt-3" title="評論內容" rows="5" cols="133"></textarea>
                </div>
                <button type="submit" class="btn btn-primary mt-3">提交留言</button>
            </form>
        </div>
    </div>

    <div class="row mt-2">
        {% if comments%}
        <span>网友留言</span>
        <div>共有{{comments.count}}条评论</div>
        <div>
           {% for comment in comments %}
            <div class="mt-3">
                <i class="bi bi-person-circle text-primary pe-1"></i>{{comment.user}}于{{comment.created|date:'Y-m-d'}}說：
                <div class="h-30 mt-1">
                    {{comment.body}}
                </div>
            </div>
            {% endfor %}
        </div>
    {% endif %}
    </div>

</div>
{% endblock content %}